import React, { useState } from 'react';
import styles from './index.less';
import { useWindowSize } from '@/utils/windowsize';
import {
    DndContext,
    useSensor,
    useSensors,
    KeyboardSensor,
} from '@dnd-kit/core';
import DraggableItem from '@/components/Draggable';
import { Slider, Dropdown, Modal, message } from 'antd';
import { MouseSensor, PointerSensor } from "@/utils/handledraggable"
import { Resizable } from "re-resizable";
import { useModel } from "umi";
import * as Comps from "./components"
import InitForm from '../InitForm';
import { pxConversionMm, mmConversionPx } from "@/utils/transpxmm";
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
const formatter = (value) => `${value}%`;
function spArr(arr, num) { //arr是你要分割的数组，num是以几个为一组
    let newArr = [] //首先创建一个新的空数组。用来存放分割好的数组
    for (let i = 0; i < arr.length;) { //注意：这里与for循环不太一样的是，没有i++
        newArr.push(arr.slice(i, i += num));
    }
    return newArr
}


function Apage({ config, setconfig, layer, collapsed }) {
    const { width, height } = useWindowSize();//设备宽高
    const [resizing, setresizing] = useState(false);//缩放ing
    const [activeId, setActiveId] = useState(null);//当前拖拽的id
    const [checkedId, setcheckedId] = useState();
    const { initialState, setInitialState } = useModel("@@initialState");
    const [sub, setsub] = useState(0);
    const { editext, selectedIndexArr, selectedKeys } = initialState;


    let getpagesize = () => {
        let active = config?.pages?.filter(it => it?.active)[0] ?? {}, percent = 1, pagewidth, pageheight, acw, ach;
        //编辑排除毫米影响
        if (active.unit == "px") {
            acw = active.width;
            ach = active.height;
        } else {
            acw = mmConversionPx(active.width);
            ach = mmConversionPx(active.height);
        }

        if (acw && ach) {
            percent = ach / acw
        } else {
            percent = config?.height / config?.width
        }

        if (percent < 1) {
            pagewidth = width - (collapsed ? 80 : 240) - 460;
            pageheight = pagewidth * percent;
            //溢出补充
            if (pageheight > height - 100) {
                pageheight = height - 100;
                pagewidth = pageheight / percent
            }
        } else {
            pageheight = height - 100;
            pagewidth = pageheight / percent
        }


        return {
            percent: pageheight / ach,
            repercent: ach / pageheight,
            height: parseInt(pageheight),
            width: parseInt(pagewidth)
        }
    }

    function handleDragStart(event) {
        setActiveId(event.active.id);
    }

    function handleDragEnd({ active, delta }) {
        setActiveId(null);
        setcheckedId(active.id);
        setconfig((config) => {
            let newconfig = JSON.parse(JSON.stringify(config));
            if (active.id && resizing === false) {
                //新建id 并 配置基础位置信息
                let percent = getpagesize().percent;
                newconfig.pages = newconfig?.pages?.map?.(item => {
                    if (item.active) {
                        item.components = item?.components?.map?.(it => {
                            if (it?.id == active.id) {
                                let prevx = it?.style?.left ?? 0,
                                    prevy = it?.style?.top ?? 0;
                                it.style.left = prevx + delta.x / percent;
                                it.style.top = prevy + delta.y / percent;
                                //拖拽结束设置当前操作面板
                                setInitialState(s => ({ ...s, component: it?.type, componentConfig: it, curselected: it?.id }));
                            }
                            return it
                        })
                    }
                    return item
                });
                return newconfig
            }
            return newconfig
        });
    }

    const mouseSensor = useSensor(MouseSensor, {
        activationConstraint: {
            distance: 8,
        },
    });

    // const keyboardSensor = useSensor(KeyboardSensor, {
    //     activationConstraint: {
    //         distance: 8,
    //     },
    // });

    const sensors = useSensors(mouseSensor);
    let current = config?.pages?.filter(it => it?.active) ? config?.pages?.filter(it => it?.active)[0] : {};

    function getmergeconfig(selectedIndexArr, col) {
        let min = Math.min(...selectedIndexArr),
            max = Math.max(...selectedIndexArr)
        let startrow = Math.ceil(min / col),
            startcol = min < col ? min : min % col == 0 ? col : min % col,
            endrow = Math.ceil(max / col),
            endcol = max < col ? max : max % col == 0 ? col : max % col,
            rowNum = endrow - startrow + 1,
            columnNum = endcol - startcol + 1;

        return {
            startrow, startcol, endrow, endcol, rowNum, columnNum, min, max
        }
    }

    return (
        <div>
            {
                config?.id ?
                    <div id='poster' className={styles.box} style={{
                        backgroundColor: config?.pages?.filter(it => it?.active)[0]?.backgroundColor,
                        width: getpagesize().width,
                        height: getpagesize().height,
                        overflow: 'hidden',
                    }} onClick={() => {
                        setcheckedId("");
                        setInitialState(s => ({ ...s, component: "Canvas", componentConfig: {}, curselected: "canvas" }));
                    }}>
                        <DndContext sensors={sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
                            <div style={{ width: "100%", height: "100%", transform: `scale(${getpagesize().percent})`, transformOrigin: "left top", transition: "all 0.4s", userSelect: "none" }}>
                                {
                                    current?.components && current.components.map(it => {
                                        return <DraggableItem
                                            key={it?.id}
                                            drag={!resizing}
                                            style={{ ...it?.style, border: "none", backgroundColor: "transparent" }}
                                            id={it?.id}
                                            percent={getpagesize().percent}
                                        >
                                            <Dropdown
                                                overlayStyle={{
                                                    zIndex: 999999
                                                }}
                                                onVisibleChange={async (visible) => {
                                                    let strs = ''
                                                    if (window?.getSelection?.()?.baseNode?.parentNode?.className == "sets") {
                                                        var div = document.querySelector("i");
                                                        let curdom = document.getElementById(`sets` + it.id);
                                                        if (div) {
                                                            curdom.removeChild(div);
                                                        }
                                                        function insertHtmlAtCaret(html) {
                                                            var sel, range;
                                                            if (window.getSelection) {
                                                                // IE9 and non-IE
                                                                sel = window.getSelection();
                                                                if (sel.getRangeAt && sel.rangeCount) {
                                                                    range = sel.getRangeAt(0);
                                                                    range.deleteContents();
                                                                    console.log(range.endOffset);
                                                                    // Range.createContextualFragment() would be useful here but is
                                                                    // non-standard and not supported in all browsers (IE9, for one)
                                                                    var el = document.createElement("div");
                                                                    el.innerHTML = html;
                                                                    var frag = document.createDocumentFragment(), node, lastNode;
                                                                    while ((node = el.firstChild)) {
                                                                        lastNode = frag.appendChild(node);
                                                                    }
                                                                    range.insertNode(frag);
                                                                    // Preserve the selection
                                                                    if (lastNode) {
                                                                        range = range.cloneRange();
                                                                        range.setStartAfter(lastNode);
                                                                        range.collapse(true);
                                                                        sel.removeAllRanges();
                                                                        sel.addRange(range);
                                                                    }
                                                                }
                                                            } else if (document.selection && document.selection.type != "Control") {
                                                                // IE < 9
                                                                document.selection.createRange().pasteHTML(html);
                                                            }
                                                        }
                                                        insertHtmlAtCaret(`<i style='width:0;height:0;display:inline-block;overflow:hidden'>|</i>`);
                                                        let htmldata = curdom.innerText;
                                                        strs = htmldata;
                                                    }


                                                    if (visible) {
                                                        let ifrow = false,
                                                            ifcol = false;
                                                        if (it?.type == "Atable" && selectedKeys.length == 1) {
                                                            it.dataSource.map(item => {
                                                                if (selectedKeys[0] == item.id) {
                                                                    ifrow = !!item.startrow;
                                                                    ifcol = !!item.startcol
                                                                }
                                                            })
                                                        }
                                                        setsub({
                                                            index: window?.getSelection?.()?.anchorOffset ?? null, //元素下标
                                                            className: window?.getSelection?.()?.baseNode?.parentNode?.className,//元素父级class
                                                            ifrow,  //是否存在删除行按钮
                                                            ifcol, //是否存在删除列按钮
                                                            strs
                                                        })
                                                    }
                                                }}
                                                overlay={<div style={{ width: 120, overflow: "hidden", backgroundColor: "#fff", borderRadius: 8, border: "1px solid #f0f0f0" }}
                                                    onMouseDown={e => {
                                                        e.stopPropagation();
                                                        setcheckedId(it?.id);
                                                        setInitialState(s => ({ ...s, component: it?.type, componentConfig: it, curselected: it?.id }));
                                                    }}
                                                >
                                                    {[
                                                        {
                                                            label: '插入变量',
                                                            key: 'bind',
                                                            style: {
                                                                color: "#1dac57",
                                                                borderBottom: "1px solid #f0f0f0",
                                                                display: (selectedKeys.length > 1 || sub.className == "nodnd" || ["Rowtext", "Columntext", "Atable"].indexOf(it?.type) == -1) ? "none" : "flex"
                                                            },
                                                            click: () => {
                                                                Modal.info({
                                                                    title: "插入变量",
                                                                    maskClosable: true,
                                                                    width: 606,
                                                                    content: <div>
                                                                        <InitForm
                                                                            style={{ marginBottom: -20 }}
                                                                            fields={{
                                                                                "variable": {
                                                                                    "value": null,
                                                                                    "type": "checktable",
                                                                                    "title": "",
                                                                                    "name": [
                                                                                        "variable"
                                                                                    ],
                                                                                    "required": false,
                                                                                    "columns": [
                                                                                        {
                                                                                            "title": "变量名称",
                                                                                            "dataIndex": "variable_name",
                                                                                            "key": "variable_name",
                                                                                        },
                                                                                        {
                                                                                            "title": "变量类型",
                                                                                            "dataIndex": "variable_type",
                                                                                            "key": "variable_type",
                                                                                            "search": false
                                                                                        },
                                                                                        {
                                                                                            "title": "数据来源",
                                                                                            "dataIndex": "source",
                                                                                            "key": "source",
                                                                                            "search": false
                                                                                        }
                                                                                    ],
                                                                                    "editable": false,
                                                                                    "path": "/api/template/variable_list",
                                                                                    "extraparams": { id: config.id },
                                                                                    "rowKey": "variable_name",
                                                                                    "rowName": "variable_name",
                                                                                    "tabletype": "radio",
                                                                                    "pagination": "false",
                                                                                    "col": {
                                                                                        "span": 24
                                                                                    }
                                                                                },
                                                                            }}
                                                                            submitData={async (vals) => {
                                                                                let selectname = Object.values(vals)[0] ?? null;
                                                                                await setconfig((config) => {
                                                                                    let newconfig = JSON.parse(JSON.stringify(config));
                                                                                    newconfig.pages = newconfig?.pages?.map?.(item => {
                                                                                        if (item.active) {
                                                                                            item.components = item?.components?.map?.(its => {
                                                                                                if (its.id == it?.id) {
                                                                                                    if (it?.type == "Atable") {
                                                                                                        its.dataSource = its.dataSource.map((it, i) => {
                                                                                                            if (it.id == editext?.id) {
                                                                                                                let htmldata = it.content;
                                                                                                                let finaldata = htmldata.substring(0, sub.index) + `{{${selectname}}}` + htmldata.substring(sub.index);
                                                                                                                it.content = finaldata;
                                                                                                                setInitialState(s => ({
                                                                                                                    ...s,
                                                                                                                    editext: {
                                                                                                                        id: it.id,
                                                                                                                        value: finaldata
                                                                                                                    }
                                                                                                                }));
                                                                                                            }
                                                                                                            return it
                                                                                                        })

                                                                                                    } else {
                                                                                                        let finaldata = sub.strs.replace("|", `{{${selectname}}}`);
                                                                                                        its.content = finaldata;
                                                                                                        its.keys = its.keys ?? [];
                                                                                                    }
                                                                                                }
                                                                                                return its
                                                                                            })
                                                                                        }
                                                                                        return item
                                                                                    });
                                                                                    return newconfig
                                                                                });
                                                                                Modal.destroyAll();
                                                                            }}
                                                                        >

                                                                        </InitForm>
                                                                    </div>,
                                                                    okText: "确定",
                                                                    okButtonProps: {
                                                                        type: "text",
                                                                        style: { display: "none" }
                                                                    }
                                                                })

                                                            }
                                                        },
                                                        {
                                                            label: '合并单元格',
                                                            key: 'merge',
                                                            style: {
                                                                color: "#1dac57",
                                                                borderBottom: "1px solid #f0f0f0",
                                                                display: (selectedKeys.length > 1 && it?.type == "Atable") ? "flex" : "none"
                                                            },
                                                            click: () => {

                                                                let { startrow, startcol, endrow, endcol, rowNum, columnNum, min, max } = getmergeconfig(selectedIndexArr, it.rowcol.col);
                                                                setconfig((config) => {
                                                                    let newconfig = JSON.parse(JSON.stringify(config));
                                                                    let merge = selectedIndexArr;
                                                                    newconfig.pages = newconfig?.pages?.map?.(item => {
                                                                        if (item.active) {
                                                                            item.components = item?.components?.map?.(its => {
                                                                                if (its.id == it?.id) {
                                                                                    //dataSource change & style
                                                                                    its.dataSource = its.dataSource.map((item, index) => {
                                                                                        //合并的单元格隐藏 
                                                                                        if (selectedIndexArr.indexOf((index + 1)) != -1) {
                                                                                            item.style = {
                                                                                                ...item.style,
                                                                                                display: "none"
                                                                                            }
                                                                                            if (item.merge) {
                                                                                                merge = [...new Set([...merge, ...item.merge])]
                                                                                            }
                                                                                        }

                                                                                        if ((index + 1) == min) {
                                                                                            item = {
                                                                                                ...item,
                                                                                                style: {
                                                                                                    ...item.style,
                                                                                                    display: "flex"
                                                                                                },
                                                                                                startrow,
                                                                                                startcol,
                                                                                                endrow,
                                                                                                endcol,
                                                                                                rowNum,
                                                                                                min,
                                                                                                max,
                                                                                                columnNum,
                                                                                                merge//解散合并
                                                                                            }
                                                                                        }
                                                                                        return item
                                                                                    })

                                                                                }
                                                                                return its
                                                                            })
                                                                        }
                                                                        return item
                                                                    });
                                                                    return newconfig
                                                                });

                                                            }
                                                        },
                                                        {
                                                            label: '删除本行',
                                                            key: 'deleterow',
                                                            style: {
                                                                color: "#1dac57",
                                                                borderBottom: "1px solid #f0f0f0",
                                                                display: (selectedKeys.length == 1 && it?.type == "Atable" && !sub.ifrow) ? "flex" : "none"
                                                            },
                                                            click: () => {
                                                                setconfig((config) => {
                                                                    let newconfig = JSON.parse(JSON.stringify(config));
                                                                    newconfig.pages = newconfig?.pages?.map?.(item => {
                                                                        if (item.active) {
                                                                            item.components = item?.components?.map?.(its => {
                                                                                if (its.id == it?.id) {
                                                                                    let spiltarr = spArr(its.dataSource.map((it, i) => (i + 1)), its.rowcol.col);
                                                                                    let disnonearr = spiltarr.filter(uit => uit.includes(selectedIndexArr[0]));
                                                                                    disnonearr = disnonearr[0];
                                                                                    let currow = Math.ceil(selectedIndexArr[0] / its.rowcol.col);
                                                                                    //dataSource change 
                                                                                    let ifs = false;
                                                                                    its.dataSource = its.dataSource.map(itz => {
                                                                                        if (itz.startrow == currow && itz.rowNum > 1) {
                                                                                            ifs = true;
                                                                                        }
                                                                                        return itz
                                                                                    })

                                                                                    if (ifs) {
                                                                                        message.warn("首行存在已合并的单元格不可删除！");
                                                                                        return its
                                                                                    }

                                                                                    its.dataSource = its.dataSource.map(itz => {
                                                                                        //判断删除行是否存在合并单元格
                                                                                        if (itz.startrow && itz.style.display == "flex") {
                                                                                            let { startrow, endrow, rowNum } = itz;
                                                                                            if (currow < startrow) {
                                                                                                itz = {
                                                                                                    ...itz,
                                                                                                    startrow: startrow - 1,
                                                                                                    endrow: endrow - 1
                                                                                                }
                                                                                            } else if (currow < endrow || currow == endrow) {
                                                                                                itz = {
                                                                                                    ...itz,
                                                                                                    rowNum: rowNum - 1,
                                                                                                    endrow: endrow - 1
                                                                                                }
                                                                                            }
                                                                                        }
                                                                                        return itz
                                                                                    })
                                                                                    its.dataSource = its.dataSource.filter((uit, ins) => disnonearr.indexOf(ins + 1) == -1);
                                                                                    its.rowcol = {
                                                                                        ...its.rowcol,
                                                                                        row: its.rowcol.row - 1
                                                                                    }
                                                                                }
                                                                                setInitialState(s => ({ ...s, componentConfig: its }))//更新当前选中值
                                                                                return its
                                                                            })
                                                                        }
                                                                        return item
                                                                    });
                                                                    return newconfig
                                                                });
                                                            }
                                                        },
                                                        {
                                                            label: '删除本列',
                                                            key: 'deletecolumn',
                                                            style: {
                                                                color: "#1dac57",
                                                                borderBottom: "1px solid #f0f0f0",
                                                                display: (selectedKeys.length == 1 && it?.type == "Atable" && !sub.ifcol) ? "flex" : "none"
                                                            },
                                                            click: () => {
                                                                setconfig((config) => {
                                                                    let newconfig = JSON.parse(JSON.stringify(config));
                                                                    newconfig.pages = newconfig?.pages?.map?.(item => {
                                                                        if (item.active) {
                                                                            item.components = item?.components?.map?.(its => {
                                                                                if (its.id == it?.id) {
                                                                                    let spiltarr = spArr(its.dataSource.map((it, i) => (i + 1)), its.rowcol.col);//下标矩阵
                                                                                    let curcol = selectedIndexArr[0] < its.rowcol.col ? selectedIndexArr[0] : selectedIndexArr[0] % its.rowcol.col == 0 ? its.rowcol.col : selectedIndexArr[0] % its.rowcol.col;
                                                                                    let disnonearr = spiltarr.map(uit => { //下标
                                                                                        return uit[curcol - 1];
                                                                                    });
                                                                                    console.log(disnonearr);
                                                                                    //dataSource merge change 
                                                                                    let ifs = false;
                                                                                    its.dataSource = its.dataSource.map(itz => {
                                                                                        if (itz.startcol == curcol && itz.columnNum > 1) {
                                                                                            ifs = true;
                                                                                        }
                                                                                        return itz
                                                                                    })

                                                                                    if (ifs) {
                                                                                        message.warn("首行存在已合并的单元格不可删除！");
                                                                                        return its
                                                                                    }

                                                                                    its.dataSource = its.dataSource.map(itz => {
                                                                                        //判断删除行是否存在合并单元格
                                                                                        if (itz.startcol && itz.style.display == "flex") {
                                                                                            let { startcol, endcol, columnNum } = itz;
                                                                                            if (curcol < startcol) {
                                                                                                itz = {
                                                                                                    ...itz,
                                                                                                    startcol: startcol - 1,
                                                                                                    endcol: endcol - 1
                                                                                                }
                                                                                            } else if (curcol < endcol || curcol == endcol) {
                                                                                                itz = {
                                                                                                    ...itz,
                                                                                                    columnNum: columnNum - 1,
                                                                                                    endcol: endcol - 1
                                                                                                }
                                                                                            }
                                                                                        }
                                                                                        return itz
                                                                                    })
                                                                                    its.dataSource = its.dataSource.filter((uit, ins) => disnonearr.indexOf(ins + 1) == -1);
                                                                                    its.rowcol = {
                                                                                        ...its.rowcol,
                                                                                        col: its.rowcol.col - 1
                                                                                    }
                                                                                }
                                                                                setInitialState(s => ({ ...s, componentConfig: its }))//更新当前选中值

                                                                                return its
                                                                            })
                                                                        }
                                                                        return item
                                                                    });
                                                                    return newconfig
                                                                });
                                                            }
                                                        },
                                                        {
                                                            label: '上移一层',
                                                            key: 'up',
                                                            click: () => {
                                                                setconfig((config) => {
                                                                    let newconfig = JSON.parse(JSON.stringify(config));
                                                                    newconfig.pages = newconfig?.pages?.map?.(item => {
                                                                        if (item.active) {
                                                                            item.components = item?.components?.map?.(its => {
                                                                                if (its.id == it?.id) {
                                                                                    its.style.zIndex = its.style.zIndex + 1;
                                                                                }
                                                                                return its
                                                                            })
                                                                        }
                                                                        return item
                                                                    });
                                                                    return newconfig
                                                                });
                                                            }
                                                        },
                                                        {
                                                            label: '下移一层',
                                                            key: 'down',
                                                            click: () => {
                                                                setconfig((config) => {
                                                                    let newconfig = JSON.parse(JSON.stringify(config));
                                                                    newconfig.pages = newconfig?.pages?.map?.(item => {
                                                                        if (item.active) {
                                                                            item.components = item?.components?.map?.(its => {
                                                                                if (its.id == it?.id) {
                                                                                    its.style.zIndex = its.style.zIndex - 1;
                                                                                }
                                                                                return its
                                                                            })
                                                                        }
                                                                        return item
                                                                    });
                                                                    return newconfig
                                                                });
                                                            }
                                                        },
                                                        {
                                                            label: '置顶',
                                                            key: 'upset',
                                                            click: () => {
                                                                setconfig((config) => {
                                                                    let newconfig = JSON.parse(JSON.stringify(config));
                                                                    newconfig.pages = newconfig?.pages?.map?.(item => {
                                                                        if (item.active) {
                                                                            item.components = item?.components?.map?.(its => {
                                                                                if (its.id == it?.id) {
                                                                                    let zindexarr = item?.components.map(k => k.style.zIndex);
                                                                                    let max = Math.max(...zindexarr) + 1
                                                                                    its.style.zIndex = max;
                                                                                }
                                                                                return its
                                                                            })
                                                                        }
                                                                        return item
                                                                    });
                                                                    return newconfig
                                                                });
                                                            }
                                                        },
                                                        {
                                                            label: '置底',
                                                            key: 'downset',
                                                            click: () => {
                                                                setconfig((config) => {
                                                                    let newconfig = JSON.parse(JSON.stringify(config));
                                                                    newconfig.pages = newconfig?.pages?.map?.(item => {
                                                                        if (item.active) {
                                                                            item.components = item?.components?.map?.(its => {
                                                                                if (its.id == it?.id) {
                                                                                    let zindexarr = item?.components.map(k => k.style.zIndex);
                                                                                    let min = Math.min(...zindexarr) - 1;
                                                                                    its.style.zIndex = min;
                                                                                }
                                                                                return its
                                                                            })
                                                                        }
                                                                        return item
                                                                    });
                                                                    return newconfig
                                                                });
                                                            }
                                                        },
                                                        {
                                                            label: '删除',
                                                            key: 'delete',
                                                            style: {
                                                                color: "red"
                                                            },
                                                            click: () => {
                                                                setconfig((config) => {
                                                                    let newconfig = JSON.parse(JSON.stringify(config));
                                                                    newconfig.pages = newconfig?.pages?.map?.(item => {
                                                                        if (item.active) {
                                                                            item.components = item?.components?.filter?.(its => {
                                                                                return its.id != it?.id
                                                                            })
                                                                        }
                                                                        setInitialState(s => ({
                                                                            ...s,
                                                                            component: "Canvas",
                                                                            componentConfig: {},
                                                                            selectedKeys: [],
                                                                            selectedIndexArr: [],
                                                                            editext: {},
                                                                            curselected: "canvas"

                                                                        }));
                                                                        return item
                                                                    });
                                                                    return newconfig
                                                                });
                                                            }
                                                        }
                                                    ].map(its => {
                                                        return <div key={its.key} style={its.style ?? {}} className="hoverable" onClick={async (e) => {
                                                            await its?.click?.();
                                                            setcheckedId(it?.id);
                                                            if (its.key != "delete") {
                                                                setInitialState(s => ({ ...s, component: it?.type, componentConfig: it, curselected: it?.id }));
                                                            }
                                                        }}>
                                                            {its.label}
                                                        </div>
                                                    })}
                                                </div>}
                                                trigger={['contextMenu']}>
                                                <div
                                                    style={{ width: "100%", height: "100%", transform: `rotate(${it?.style?.rotate ?? 0}deg)`, backgroundColor: it.style.backgroundColor ?? "transparent" }}
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        setcheckedId(it?.id);
                                                        setInitialState(s => ({ ...s, component: it?.type, componentConfig: it, curselected: it?.id }));
                                                    }}>
                                                    {
                                                        (it?.id == checkedId && !["Dashed"].includes(it?.type)) ? <Resizable
                                                            style={{
                                                                border: "1px solid #666",
                                                                transformOrigin: "left top",
                                                                borderRadius: it?.style?.borderRadius ?? 0,
                                                                overflow: "hidden"
                                                            }}
                                                            onResizeStart={() => {
                                                                setresizing(true)
                                                            }}
                                                            onResizeStop={(e, direction, ref, d) => {
                                                                setresizing(false);
                                                                setconfig(s => {
                                                                    let newconfig = JSON.parse(JSON.stringify(s));
                                                                    newconfig.pages = newconfig?.pages?.map?.(item => {
                                                                        if (item.active) {
                                                                            item.components = item?.components?.map?.(its => {
                                                                                if (its.id == it?.id) {
                                                                                    if (it?.type == "Picture" && !it?.edit) {
                                                                                        its.imgstyle = {
                                                                                            ...its.imgstyle,
                                                                                            width: its.imgstyle.width + d.width,
                                                                                            height: its.imgstyle.height + d.height
                                                                                        }
                                                                                    }
                                                                                    its.style = {
                                                                                        ...its.style,
                                                                                        width: its.style.width + d.width,
                                                                                        height: its.style.height + d.height
                                                                                    }
                                                                                }
                                                                                return its
                                                                            })
                                                                        }
                                                                        return item
                                                                    });
                                                                    return newconfig
                                                                })
                                                            }}
                                                            onResize={(size) => {
                                                                //cur尺寸
                                                            }}
                                                            resizeRatio={getpagesize().repercent}
                                                            size={{
                                                                width: it?.style.width,
                                                                height: it?.style.height,
                                                            }}
                                                            lockAspectRatio={(it?.type == "Picture" && !it?.edit) ? true : false}
                                                        >
                                                            {
                                                                React.createElement(Comps[it?.type], { ...it, setconfig, checkedId, key: it.id, percent: getpagesize().percent })
                                                            }
                                                        </Resizable> :
                                                            React.createElement(Comps[it?.type], { ...it, setconfig, checkedId, key: it.id, percent: getpagesize().percent })
                                                    }
                                                </div>
                                            </Dropdown>
                                        </DraggableItem>
                                    })
                                }
                            </div>
                        </DndContext>
                    </div>
                    :
                    <div className={styles.box}>

                    </div>

            }
            <Dropdown
                placement="topRight"
                overlay={<div style={{ width: 200, backgroundColor: "#fff", padding: 8, borderRadius: 8, boxShadow: "0 0 32px #999" }} className='center'>
                    <span>缩放:</span>
                    <div style={{ flex: 1, marginLeft: 6 }} onClick={e => { e.stopPropagation() }}>
                        <Slider
                            min={5}
                            max={200}
                            step={5}
                            tipFormatter={formatter}
                        ></Slider>


                    </div>
                </div>}


            >
                <div className={styles.percent}>
                    <span>
                        {parseInt(getpagesize().percent * 100)}%
                    </span>
                </div>
            </Dropdown>

        </div>

    );
}

export default Apage;